<template>
  <!-- 用户管理————授权模式 -->
  <div id="userAuth">
    <!-- <Breadcrumb content="授权模式" /> -->
    <Splitpanes class="area">
      <Pane :size="(500 / conWidth) * 100">
        <vxe-toolbar perfect>
          <template #buttons>
            <div class="smallToolTitle">角色</div>
            <vxe-input v-model="roleSearchform.searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @keyup="keyupRoleEnter" @clear="findRoleList" @search-click="findRoleList()"></vxe-input>
            <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" :loading="showLoading" content="刷新" @click="findRoleList"></vxe-button>
          </template>
        </vxe-toolbar>

        <div class="leftTable">
          <vxe-table
            ref="roleTable"
            class="mytable-scrollbar"
            border="inner"
            :loading="showLoading"
            :data="roleList"
            :expand-config="{ expandAll: true, reserve: true }"
            @current-change="roleRowClick"
            :row-config="{ isCurrent: true, isHover: true }"
            :keyboard-config="{
              isArrow: true,
              isTab: true,
              isEdit: true
            }"
            :edit-config="{ trigger: 'dblclick', mode: 'row', showStatus: true }"
            resizable
            show-overflow
            keep-source
          >
            <vxe-column type="seq" title="序号" width="45px" align="center"></vxe-column>
            <vxe-column field="roleName" title="角色名称" width="185px"></vxe-column>
            <vxe-column field="code" title="角色编码"></vxe-column>
          </vxe-table>

          <vxe-pager align="left" style="margin-top: 2px" size="mini" min-height="auto" :current-page.sync="page.currentPage" :page-size.sync="page.pageSize" :total="page.totalResult" :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']" @page-change="handleSizeChange($event)"></vxe-pager>
        </div>
      </Pane>

      <!-- 中间用户 -->
      <Pane :size="(700 / conWidth) * 100">
        <vxe-toolbar perfect>
          <template #buttons>
            <div class="smallToolTitle">用户</div>
            <vxe-input v-model="userSearchform.searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @keyup="keyupUserEnter" @clear="findUserList" @search-click="findUserList()"></vxe-input>
            <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="rightTableLoading" @click="findUserList"></vxe-button>
            <vxe-button type="text" class="button-blue" icon="vxe-icon-sort" content="导入用户" :loading="importUserLoading" @click="getEmployeeList()"></vxe-button>
            <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="新建" @click="addUserDialog()"></vxe-button>
          </template>
        </vxe-toolbar>

        <div class="middleTable">
          <vxe-table
            ref="userTable"
            class="mytable-scrollbar"
            :loading="rightTableLoading"
            border="inner"
            :data="userList"
            :expand-config="{ expandAll: true, reserve: true }"
            @current-change="userRowClick"
            :row-config="{ isCurrent: true, isHover: true }"
            :keyboard-config="{
              isArrow: true,
              isTab: true,
              isEdit: true
            }"
            :edit-config="{ trigger: 'dblclick', mode: 'row', showStatus: true }"
            resizable
            show-overflow
            keep-source
          >
            <vxe-column type="seq" title="序号" width="60" align="center"></vxe-column>
            <vxe-column field="realname" title="用户名称" width="180"></vxe-column>
            <vxe-column field="username" title="用户编码" width="240"></vxe-column>

            <vxe-column title="操作" min-width="90" align="center" fixed="right">
              <template #default="{ row }">
                <vxe-button type="text" status="danger" icon="vxe-icon-edit" circle @click.native="editUserDialog(row)"></vxe-button>
                <!-- <vxe-button
                  v-if="row.differ > 0"
                  type="text"
                  status="primary"
                  icon="vxe-icon-search-zoom-in"
                  circle
                  @click.native="getDifferenceSetRoles(row)"
                ></vxe-button> -->

                <div class="badgeContainer">
                  <span class="badgeItem" v-if="row.differ > 0" @click="getDifferenceSetRoles(row)"></span>
                </div>
              </template>
            </vxe-column>
          </vxe-table>

          <vxe-pager align="left" style="margin-top: 2px" size="mini" min-height="auto" :current-page.sync="page.currentPage" :page-size.sync="page.pageSize" :total="page.totalResult" :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']" @page-change="handleSizeChange($event)"></vxe-pager>

          <el-dialog v-model="showDialog" :title="titleType()" width="600px">
            <!-- 角色表单 -->
            <el-form ref="userFormRef" :model="userForm" :rules="userFormRule" label-width="100px" class="form-input-m" :inline-message="true" @reset="resetUserForm">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="员工编号" prop="hisEmployeeCode" span="23">
                    <SelectDataList
                      ref="employeeSelectRef"
                      :url="'/api/sys/hisEmployee/getEmployeePageList'"
                      :displayField="[
                        { title: '编号', props: 'code' }, //列标题
                        { title: '名称', props: 'name' }
                      ]"
                      :searchParam="{
                        //seachValue: form.hisEmployeeCode
                      }"
                      :inputKeyName="'seachValue'"
                      :isPage="true"
                      @selectDataRow="SelectRowClick"
                      v-model="userForm.hisEmployeeCode"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item prop="username" label="用户名">
                    <el-input type="text" v-model="userForm.username" placeholder="请输入用户名" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item prop="realname" label="名字">
                    <el-input type="text" v-model="userForm.realname" @change="autoInputCode" placeholder="请输入名字" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item prop="tel" label="电话">
                    <el-input type="text" v-model="userForm.tel" placeholder="请输入电话" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item prop="email" label="邮箱">
                    <el-input type="text" v-model="userForm.email" placeholder="请输入邮箱" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item prop="inputCode" label="助记符">
                    <el-input type="text" v-model="userForm.inputCode" placeholder="请输入助记符" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="所属机构" prop="orgId">
                    <el-select v-model="userForm.orgId" placeholder="请选择" ref="selectOrgRef" filterable>
                      <el-option hidden :value="userForm.orgId ? userForm.orgId : ''" :label="userForm.orgName"></el-option>
                      <el-tree :data="orgList" :props="defaultProps" :expand-on-click-node="false" :default-expand-all="true" @node-click="handleOrgNodeClick" highlight-current ref="orgTreeRef" node-key="id" class="tools-tree"></el-tree>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="所属部门" prop="deptId">
                    <el-select v-model="userForm.deptId" placeholder="请选择" @clear="handleDeptClear" ref="selectDeptRef" clearable filterable>
                      <el-option hidden :value="userForm.deptId ? userForm.deptId : ''" :label="userForm.deptName"></el-option>
                      <el-tree :data="deptList" :props="defaultProps" :expand-on-click-node="false" :default-expand-all="true" @node-click="handleDeptNodeClick" highlight-current ref="deptTreeRef" node-key="id" class="tools-tree"></el-tree>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div class="dialog-footer flex right justify-end">
              <el-button type="primary" @click="saveUser('userFormRef')">保存</el-button>
              <el-button @click="closeDialog('userFormRef')">取消</el-button>
            </div>
          </el-dialog>
        </div>

        <!-- 导入用户 -->
        <vxe-modal v-model="employeeModal">
          <template #default>
            <el-scrollbar height="100%">
              <div class="importUser">
                <vxe-table ref="employeeTable" :loading="importUserLoading" border="inner" :data="employeeList" :expand-config="{ expandAll: true, reserve: true }" @current-change="userRowClick" :row-config="{ isCurrent: true, isHover: true }" :edit-config="{ trigger: 'dblclick', mode: 'row', showStatus: true }" resizable show-overflow keep-sourcexs>
                  <vxe-column type="checkbox" width="50px" align="center"></vxe-column>
                  <vxe-column type="seq" title="序号" width="50px" align="center"></vxe-column>
                  <vxe-column field="name" title="员工名称" width="400px"></vxe-column>
                  <vxe-column field="code" title="员工编码"></vxe-column>
                </vxe-table>
              </div>
            </el-scrollbar>

            <div class="flex right justify-end importUserButton">
              <vxe-button type="text" status="primary" icon="vxe-icon-add" content="添加" @click="importEmployee()"></vxe-button>
            </div>
          </template>
        </vxe-modal>

        <!-- 角色外权限  -->
        <el-dialog title="角色外权限" v-model="differenceSetDialog">
          <template #default>
            <el-scrollbar height="400px" style="padding-right: 8px">
              <div class="paneBox" v-loading="rolesPermissionDialog">
                <el-card class="box-card" v-for="(item, index) in uncludeModules" :key="index" shadow="hover">
                  <template #header>
                    <div class="card-header">
                      <!-- 模块名 -->
                      <span class="cardtext">{{ item.name }}</span>
                    </div>
                  </template>

                  <div class="detailBox text">
                    <div class="menuBox">
                      <div class="tagtitle1">菜单权限</div>
                      <div v-for="(m, mindex) in uncludeModuleMenuMap[item.id]" :key="mindex" style="display: inline-block">
                        <!-- 一级菜单 (没有子集时自己要加复选框) -->
                        <el-checkbox-group v-if="m.children.length === 0" v-model="checkMenuRoles.arr" @change="checkMenuboxs_change">
                          <div class="checkItem">
                            <el-checkbox :key="m.id" :label="m.title" type="success" class="margin-left-xs tagBox tagboxborder dialogOnlyFirstMenu"> </el-checkbox>
                          </div>
                        </el-checkbox-group>
                        <!-- 一级菜单(有子集时 子集加复选框) -->
                        <div v-else>
                          <el-tag class="margin-left-xs tagBox tagboxborder DialogFirstTag" effect="plain" type="success">
                            {{ m.title }}
                          </el-tag>
                          <!-- 二级菜单 -->
                          <div class="twoMenuTag" v-for="(sonm, sonmindex) in m.children" :key="sonmindex">
                            <el-checkbox-group v-model="checkMenuRoles.arr" @change="checkMenuboxs_change">
                              <div class="checkItem">
                                <el-checkbox :key="sonm.id" :label="sonm.id" type="info" class="margin-left-xs tagBox DiaTwoboxBorder twomenutagbgc"> {{ sonm.title }}</el-checkbox>
                              </div>
                            </el-checkbox-group>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- 功能(只有一级) -->
                    <div class="pointBox">
                      <div class="tagtitle2">功能权限</div>
                      <el-checkbox-group v-model="checkPointsRoles.arr" @change="checkPointsboxs_change">
                        <div class="checkItem">
                          <el-checkbox v-for="(p, pindex) in uncludeModulePointCodeMap[item.id]" :key="p.id" :label="p.id" class="margin-left-xs margin-bottom-sm tagBox1 tagboxborder pointSelectBox">
                            {{ p.title }}
                          </el-checkbox>
                        </div>
                      </el-checkbox-group>
                    </div>
                  </div>
                </el-card>
              </div>
            </el-scrollbar>
            <div class="dialog-footer right flex justify-end" style="margin-top: 10px">
              <el-button @click="differenceSetDialog = false">取 消</el-button>
              <el-button type="primary" @click="saveDifferenceData()">确 定</el-button>
            </div>
          </template>
        </el-dialog>
      </Pane>
      <!--  右侧详细信息 -->
      <Pane class="rightDetail">
        <div class="rightContent" v-loading="showLoading">
          <el-tabs type="border-card">
            <el-tab-pane label="功能菜单">
              <div class="toolbartitle">权限详情</div>
              <el-scrollbar style="height: calc(100% - 40px)">
                <div class="paneBox" v-if="modules.length !== 0">
                  <el-card class="box-card" v-for="(item, index) in modules" :key="item.id" shadow="hover">
                    <template #header>
                      <div class="card-header">
                        <span class="cardtext">{{ item.name }}</span>
                      </div>
                    </template>
                    <div class="detailBox text">
                      <div class="menuBox">
                        <div class="tagtitle1">菜单权限</div>
                        <div v-for="(m, mindex) in moduleMenuMap[item.id]" :key="mindex" style="display: inline-block">
                          <!-- 一级菜单 -->
                          <el-tag class="margin-left-xs tagBox tagboxborder" effect="plain" type="success"
                            >{{ m.title }}
                            <el-icon class="tagicon" @click="handleClose(m)"><Close style="color: #27b46b" /></el-icon>
                          </el-tag>
                          <!-- 二级菜单 -->
                          <div class="twoMenuTag" v-for="(sonm, sonmindex) in m.children" :key="sonmindex">
                            <el-tag class="margin-left-xs margin-bottom-sm tagBox twomenutagbgc" type="info" effect="plain" style="margin-left: -5px"
                              >{{ sonm.title }}
                              <el-icon class="tagicon" @click="handleClose(sonm)"><Close style="color: #9daed2" /></el-icon>
                            </el-tag>
                          </div>
                        </div>
                      </div>
                      <div class="pointBox">
                        <div class="tagtitle2">功能权限</div>
                        <div>
                          <el-tag class="margin-left-xs margin-bottom-sm tagBox1 tagboxborder pointSelectBox" effect="plain" type="success" v-for="(p, pindex) in modulePointCodeMap[item.id]" :key="pindex"
                            >{{ p.title }}
                            <span
                              ><el-icon class="tagicon" @click="handleClose(p)"><Close style="color: #eabe7e" /></el-icon></span
                          ></el-tag>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </div>
                <el-empty :image-size="200" v-else style="height: calc(100% - 40px)" />
              </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="报告单元">
              <el-scrollbar style="height: 100%">
                <div class="UnitBox">
                  <div class="allSelectedBtns">
                    <vxe-button status="primary" content="设置全选" @click="selectAllSelect"></vxe-button>
                    <vxe-button status="primary" content="取消全选" @click="clearAllSelect"></vxe-button>
                  </div>
                  <div>
                    <el-checkbox-group v-model="checkRptGroupList">
                      <el-checkbox border :label="p.rptGroupName" v-for="(p, pindex) in rptGroupList" :key="pindex" @change="rptGroupChange($event, p.id)" />
                    </el-checkbox-group>
                  </div>
                </div>
              </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="检验仪器">
              <el-scrollbar style="height: 100%">
                <div class="UnitBox">
                  <div class="allSelectedBtns">
                    <vxe-button status="primary" content="设置全选" @click="selectAllSelect1"></vxe-button>
                    <vxe-button status="primary" content="取消全选" @click="clearAllSelect1"></vxe-button>
                  </div>
                  <div>
                    <el-checkbox-group v-model="checkInstrSetupList">
                      <el-checkbox border :label="p.instrName" v-for="(p, pindex) in instrSetupList" :key="pindex" @change="instrSetupChange($event, p.id)" />
                    </el-checkbox-group>
                  </div>
                </div>
              </el-scrollbar>
            </el-tab-pane>
          </el-tabs>
        </div>
      </Pane>
    </Splitpanes>
  </div>
</template>

<script setup lang="ts">
import Breadcrumb from '@/components/Breadcrumb.vue';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import { AppStore } from '../../stores/store';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
// import { read } from 'fs';
import SelectDataList from '@/components/SelectDataList.vue';
import { funBdsJsResult } from '@/utils/Expression';
let { proxy }: any = getCurrentInstance();
let store = AppStore();

// 加载状态
let showLoading = ref(false); //左边刷新
let rightTableLoading = ref(false); //右边表格刷新
let importUserLoading = ref(false); //导入用户加载状态
let rolesPermissionDialog = ref(false); //获取角色外权限

// 获取屏幕高度
let conHeight = ref((document.documentElement.clientHeight || document.body.clientHeight) - 148 + 'px');

// 获取屏幕宽度
let conWidth = ref(document.documentElement.clientWidth);

// 获取模块id
const moduleId = localStorage.getItem('moduleId');
// 功能点权限
let modulePoitPre = reactive([]);
// 通过权限获取功能点
let modulePointMap = store.userInfo.modulePointMap;
// 条数/页
const PageSizeList = [10, 50, 100, 200, 500];
let page = reactive({
  currentPage: 1,
  pageSize: PageSizeList[1],
  totalResult: 0
});
let userSearchform = reactive({
  id: null,
  searchValue: ''
});
let roleSearchform = reactive({
  id: null,
  searchValue: ''
});

let userForm = reactive({
  id: null,
  username: '',
  realname: '',
  password: '',
  tel: '',
  email: '',
  inputCode: '',
  enable: '0', //是否启用
  roleIds: [],
  orgName: '',
  orgId: '',
  deptId: '',
  deptName: '',
  hisEmployeeId: '', //用户员工
  hisEmployeeCode: '',
  searchValue: ''
});

let orgList: any = reactive([]); //所有的组织机构
let deptList: any = reactive([]); //所有的部门
let defaultProps = {
  children: 'children',
  label: 'name'
};
let roleTable = ref(); //用户表格
let roleList: any = reactive([]); //用户列表数据
let userList: any = reactive([]);
let employeeList: any = reactive([]);

// 当前选中用户数据
let roleInfo: any = reactive({
  id: '',
  name: ''
});

// 当前选中用户数据
let userInfo: any = reactive({
  id: '',
  userName: ''
});
// 页面加载时更新用户/角色列表
let loading = ref(false);

// 弹框表单状态
let showDialog = ref(false);

// 模块对象
let modules: any = reactive([]);
// 模块菜单对象
let moduleMenuMap: any = reactive({});
// 模块功能点对象
let modulePointCodeMap: any = reactive({});
// 员工列表弹框
let employeeModal = ref(false);
// 不获取不同角色弹框
let differenceSetDialog = ref(false);
// 角色外模块对象
let uncludeModules: any = reactive([]);
// 角色外模块菜单对象
let uncludeModuleMenuMap: any = reactive({});
// 角色外模块功能点对象
let uncludeModulePointCodeMap: any = reactive({});
// 角色外绑定菜单权限数组
let checkMenuRoles: any = reactive({
  arr: []
});
// 角色外绑定功能权限数组
let checkPointsRoles: any = reactive({
  arr: []
});
let rptGroupList = reactive([]);
let instrSetupList = reactive([]);
const checkRptGroupList = reactive([]);
const checkInstrSetupList = reactive([]);
let checkMap = reactive({});
let checkInstrSetUpMap = reactive({});

onMounted(() => {
  getModulePointMap();
  findRoleList(); //查找用户列表
  findOrgTree();
  findRptGroupList();
  findInstrSetUpList();
});
function rptGroupChange(e: any, rptGroupId: any) {
  if (e) {
    const url = '/api/userRptGroup/addSysUserRptGroup';
    proxy.$http
      .post(url, { userId: userInfo.id, rptGroupId: rptGroupId })
      .then((res: any) => {
        if (res.status.code !== 1) {
          VxeMessage('添加报告单元失败！', VxeNotifyType.error);
        } else {
          checkRptGroupList.push(checkMap[rptGroupId]);
        }
      })
      .catch((err: any) => {
        VxeMessage(err, VxeNotifyType.error);
      });
  }
  if (!e) {
    const url = '/api/userRptGroup/deleteSysUserRptGroup';
    proxy.$http
      .post(url, { userId: userInfo.id, rptGroupId: rptGroupId })
      .then((res: any) => {
        if (res.status.code !== 1) {
          VxeMessage('删除报告单元失败！', VxeNotifyType.error);
        } else {
          let jj = checkRptGroupList.filter((item) => item != checkMap[rptGroupId]);
          checkRptGroupList.length = 0;
          checkRptGroupList.push(...jj);
        }
      })
      .catch((err: any) => {
        VxeMessage(err, VxeNotifyType.error);
      });
  }
}

// 获取所有报告单元
function findRptGroupList() {
  const url = '/api/rptGroup/findRptGroup';
  proxy.$http
    .get(url)
    .then((res: any) => {
      if (res.status.code !== 1) {
        VxeMessage(res.status.msg, VxeNotifyType.error);
      } else {
        rptGroupList.push(...res.data);
        checkMap = Object.fromEntries(rptGroupList.map((item) => [item.id, item.rptGroupName]));
      }
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}

// 获取用户下报告单元
function findCheckList() {
  checkRptGroupList.length = 0;
  const url = '/api/userRptGroup/findSysUserRptGroupList/' + userInfo.id;
  proxy.$http
    .get(url)
    .then((res: any) => {
      if (res.status.code !== 1) {
        VxeMessage(res.status.msg, VxeNotifyType.error);
      } else {
        let n = res.data.map((item) => {
          return checkMap[item.rptGroupId];
        });
        checkRptGroupList.push(...n);
      }
    })
    .catch((err: any) => {
      VxeMessage('搜索用户列表失败', VxeNotifyType.error);
    });
}
// 添加或删除仪器权限
function instrSetupChange(e: any, instrSetupId: any) {
  if (e) {
    const url = '/api/userInstrSetup/addUserInstrSetUp';
    proxy.$http
      .post(url, { userId: userInfo.id, instrSetupId: instrSetupId })
      .then((res: any) => {
        if (res.status.code !== 1) {
          VxeMessage('添加仪器失败！', VxeNotifyType.error);
        } else {
          checkInstrSetupList.push(checkInstrSetUpMap[instrSetupId]);
        }
      })
      .catch((err: any) => {
        VxeMessage(err, VxeNotifyType.error);
      });
  } else {
    const url = '/api/userInstrSetup/deleteUserInstrSetUp';
    proxy.$http
      .post(url, { userId: userInfo.id, instrSetupId: instrSetupId })
      .then((res: any) => {
        if (res.status.code !== 1) {
          VxeMessage('删除仪器失败！', VxeNotifyType.error);
        } else {
          let jj = checkInstrSetupList.filter((item) => item != checkInstrSetUpMap[instrSetupId]);
          checkInstrSetupList.length = 0;
          checkInstrSetupList.push(...jj);
        }
      })
      .catch((err: any) => {
        VxeMessage(err, VxeNotifyType.error);
      });
  }
}

// 获取所有仪器
async function findInstrSetUpList() {
  const url = '/lis/instrSetup/findLabInstrSetupList';
  await proxy.$http
    .get(url)
    .then((res: any) => {
      if (res.status.code !== 1) {
        VxeMessage(res.status.msg, VxeNotifyType.error);
      } else {
        instrSetupList.push(...res.data);
        checkInstrSetUpMap = Object.fromEntries(instrSetupList.map((item) => [item.id, item.instrName]));
      }
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}

// 获取用户权限下的仪器
function findcheckInstrSetupList() {
  checkInstrSetupList.length = 0;
  const url = '/api/userInstrSetup/findSysUserInstrSetupList/' + userInfo.id;
  proxy.$http
    .get(url)
    .then((res: any) => {
      if (res.status.code !== 1) {
        VxeMessage(res.status.msg, VxeNotifyType.error);
      } else {
        let n = res.data.map((item) => {
          return checkInstrSetUpMap[item.instrSetupId];
        });
        checkInstrSetupList.push(...n);
      }
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}

// 角色外绑定菜单权限数组事件
function checkMenuboxs_change(value: any) {
  checkMenuRoles.arr = value;
}
// 角色外绑定功能权限数组事件
function checkPointsboxs_change(value: any) {
  checkPointsRoles.arr = value;
}

function getModulePointMap() {
  if (Object.keys(modulePointMap).includes(moduleId)) {
    modulePoitPre.push(...modulePointMap[moduleId]);
  }
}
// 回车查询
function keyupUserEnter(e: any) {
  if (e.$event.code == 'Enter') {
    // handleUserSearch(userSearchform.searchValue);
    findUserList();
  }
}
function keyupRoleEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findRoleList();
  }
}

// 判断弹框显示的标题
function titleType() {
  if (userForm.id) {
    return `编辑`;
  } else if (!userForm.id) {
    return `新建`;
  }
}

//点击每页数量
function handleSizeChange({ type, currentPage, pageSize }) {
  if (type === 'size') {
    page.currentPage = 1;
  } else {
    page.currentPage = currentPage;
  }
  page.pageSize = pageSize;
  findRoleList();
}

//查询搜索角色列表
function findRoleList() {
  showLoading.value = true;
  roleList.length = 0;
  const url = '/api/sys/findRolePageList';
  proxy.$http
    .get(url, {
      params: {
        pageIndex: page.currentPage,
        pageSize: page.pageSize,
        keywords: roleSearchform.searchValue
      }
    })
    .then((res: any) => {
      roleList.push(...res.data.records);
      page.totalResult = res.data.total;
      roleInfo.id = roleList[0].id;
      roleInfo.name = roleList[0].roleName;
      roleRowClick({
        row: roleList[0],
        rowIndex: 0
      });
      showLoading.value = false;
    })
    .catch((err: any) => {
      showLoading.value = false;
      proxy.$alert(err, '提示');
    });
}
// 查找员工列表
function findEmployeeList() {
  importUserLoading.value = true;
  employeeList.length = 0;
  const url = '/api/sys/hisEmployee/finAllHisEmployeeList/' + roleInfo.id;
  proxy.$http
    .get(url)
    .then((res: any) => {
      if (res.data.length != 0) {
        employeeList.push(...res.data);
      }
      importUserLoading.value = false;
    })
    .catch((err: any) => {
      importUserLoading.value = false;
      VxeMessage('搜索用户列表失败', VxeNotifyType.error);
    });
}
// 查询员工列表
function findUserList() {
  rightTableLoading.value = true;
  userList.length = 0;
  const url = '/api/user/sysUserAuthDetail/getUserListByRoleId';
  proxy.$http
    .post(url, {
      roleId: roleInfo.id,
      keywords: userSearchform.searchValue
    })
    .then((res: any) => {
      if (res.data.length != 0) {
        userList.push(...res.data);
        userInfo.id = userList[0].id;
        userInfo.userName = userList[0].username;
        userRowClick({
          row: userList[0],
          rowIndex: 0
        });
      }
      rightTableLoading.value = false;
    })
    .catch((err: any) => {
      rightTableLoading.value = false;

      VxeMessage('搜索用户列表失败', VxeNotifyType.error);
    });
}

function findAuthDetailList() {
  showLoading.value = true;
  const url = '/api/user/sysUserAuthDetail/getSysUserAuthdetailsByRoleIds';
  const handleObj = {
    userId: userInfo.id,
    roleId: roleInfo.id
  };
  modules.length = 0; //获取数据前清空数据，否则数据重复

  proxy.$http
    .post(url, handleObj)
    .then((res: any) => {
      modules.push(...res.data.modules);
      moduleMenuMap = res.data.moduleMenuMap;
      modulePointCodeMap = res.data.modulePointCodeMap;
      showLoading.value = false;
    })
    .catch((err: any) => {
      VxeMessage('搜索用户列表失败', VxeNotifyType.error);
      showLoading.value = false;
    });
}
function handleClose(tag: any) {
  showLoading.value = true;
  const url = '/api/user/sysUserAuthDetail/deleteUserAuthById';
  if (tag.children && tag.children.length !== 0) {
    VxeMessage('要删除的这一条数据下还有子数据，不可删除', VxeNotifyType.error);
  } else {
    let obj = {
      id: tag.creator,
      title: tag.title,
      username: userInfo.userName
    };
    proxy
      .$confirm('确定删除此条权限？', '提示', {
        cancelButtonClass: 'cancel-button',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        proxy.$http
          .post(url, obj)
          .then((res: any) => {
            if (res.data === 1) {
              modules.length = 0;
              findAuthDetailList();
              showLoading.value = false;
            }
          })
          .catch((err: any) => {
            showLoading.value = false;
            VxeMessage('删除用户详情数据失败', VxeNotifyType.error);
          });
      });
    showLoading.value = false;
  }
}

// 查询/刷新
function handleUserSearch(row: any) {
  showLoading.value = true;
  roleList.length = 0;
  const url = '/api/user/getUserPageList';
  proxy.$http
    .get(url, { params: { pageIndex: page.currentPage, pageSize: page.pageSize, keywords: row } })
    .then((res: any) => {
      roleList.push(...res.data.records);
      page.totalResult = res.data.total;
    })
    .catch((err: any) => {
      VxeMessage('查询刷新失败', VxeNotifyType.error);
    });
  showLoading.value = false;
}

// 点击当前行// 行点击事件(需要调试)
function userRowClick({ row, rowIndex }: any) {
  if (IsEmpty(row)) {
    return;
  }
  (proxy.$refs.userTable as any).setCurrentRow(row);
  userInfo.id = row.id;
  userInfo.username = row.username;
  modules.length = 0;
  findAuthDetailList();
  findCheckList();
  findcheckInstrSetupList();
}

// 点击当前行// 行点击事件(需要调试)
function roleRowClick({ row, rowIndex }: any) {
  if (IsEmpty(row)) {
    return;
  }
  modules.length = 0;
  (proxy.$refs.roleTable as any).setCurrentRow(row);
  roleInfo.id = row.id;
  roleInfo.name = row.roleName;
  findUserList();
}

// ---------------------------------------------------
//**判断为空*/
function IsEmpty(value: any) {
  if (value === undefined || value === '' || value === null) {
    return true;
  }
  if (JSON.stringify(value) === '{}') {
    return true;
  }
  return false;
}

// 点击新增
function addUserDialog() {
  showDialog.value = true;
}
function editUserDialog(row: any) {
  // console.log(row);
  userForm.id = row.id;
  userForm.username = row.username;
  userForm.realname = row.realname;
  userForm.orgId = row.orgId;
  userForm.deptId = row.deptId;
  userForm.orgName = row.orgName;
  userForm.deptName = row.deptName;
  userForm.tel = row.tel;
  userForm.email = row.email;
  userForm.inputCode = row.inputCode;
  userForm.enable = row.enable;
  userForm.roleIds = row.roleIds;
  userForm.hisEmployeeId = row.hisEmployeeId;
  userForm.hisEmployeeCode = row.hisEmployeeCode;
  findDeptTree();
  showDialog.value = true;
  setCurOrgTreeNode(userForm.orgId);
}
// 光标定位在指定字典分类上
function setCurOrgTreeNode(nodeId: any) {
  proxy.$nextTick(() => {
    const treeName = 'orgTreeRef';
    const tree: any = proxy.$refs[treeName];
    // console.log(tree);
    tree.setCurrentKey(nodeId);
  });
}

function setCurDeptTreeNode(nodeId: any) {
  proxy.$nextTick(() => {
    const treeName = 'deptTreeRef';
    const tree: any = proxy.$refs[treeName];
    tree.setCurrentKey(nodeId);
  });
}

function findOrgTree() {
  orgList.length = 0;
  const url = '/api/sys/findOrgTree';
  proxy.$http
    .get(url)
    .then((res: any) => {
      if (res.status.code !== 1) {
        proxy.$alert(res.status.msg, '提示');
      } else {
        orgList.push(...res.data.orgTree);
      }
    })
    .catch((err: any) => {
      VxeMessage('获取机构失败', VxeNotifyType.error);
    });
}

// 批量导入数据
function importEmployee() {
  const selectRows = (proxy.$refs.employeeTable as any).getCheckboxRecords();
  if (selectRows.length > 0) {
    let employeeIds = reactive([]);
    employeeIds.push(
      ...selectRows.map((element: any) => {
        return element.id;
      })
    );
    const url = '/api/user/sysUserAuthDetail/importSysUserAuthDetailsByEmployee';
    const importObj = {
      roleId: roleInfo.id,
      employeeIds: employeeIds
    };
    proxy.$http
      .post(url, importObj)
      .then((res: any) => {
        employeeModal.value = false;
        findUserList();
        // console.log('res', res);
      })
      .catch((err: any) => {
        (proxy as any).$XModal.message({
          content: err,
          status: 'warning'
        });
      });
  }
}

function findDeptTree() {
  deptList.length = 0;
  const url = '/api/sys/findDeptTree';
  const obj = { orgId: userForm.orgId, orgName: userForm.orgName };
  proxy.$http
    .get(url, { params: obj })
    .then((res: any) => {
      if (res.status.code !== 1) {
        VxeMessage('获取部门失败', VxeNotifyType.error);
      } else {
        deptList.push(...res.data.deptList);
        setCurDeptTreeNode(userForm.deptId);
      }
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}

function handleOrgNodeClick(data: any) {
  // console.log(data);
  userForm.orgId = data.id;
  userForm.orgName = data.name;
  userForm.deptId = '';
  userForm.deptName = '';
  findDeptTree();
  const selectOrgRef: any = proxy.$refs['selectOrgRef'];
  selectOrgRef.blur();
}

function handleDeptNodeClick(data: any) {
  userForm.deptId = data.id;
  userForm.deptName = data.name;
  const selectDeptRef: any = proxy.$refs['selectDeptRef'];
  selectDeptRef.blur();
}

function handleDeptClear() {
  userForm.deptId = '';
  userForm.deptName = '';
  const treeName = 'deptTreeRef';
  const tree: any = proxy.$refs[treeName];
  tree.setCurrentKey(null);
}

// 保存
function saveUser(formName: any) {
  let $el = proxy.$refs.userFormRef;
  $el.validate((valid: any) => {
    if (!valid) {
      return false;
    }

    if (userForm.id === null) {
      // 新增用户
      const url = '/api/user/addUserInfo';
      const user = {
        username: userForm.username,
        realname: userForm.realname,
        orgId: userForm.orgId,
        deptId: userForm.deptId,
        tel: userForm.tel,
        email: userForm.email,
        inputCode: userForm.inputCode,
        roleIds: roleInfo.id.split(','),
        enable: userForm.enable,
        hisEmployeeId: userForm.hisEmployeeId,
        hisEmployeeCode: userForm.hisEmployeeCode
      };
      proxy.$http
        .post(url, user)
        .then((res: any) => {
          VxeMessage('新增用户成功', VxeNotifyType.success);
          clearForm();
          showDialog.value = false;
          findUserList();
        })
        .catch((err: any) => {
          VxeMessage('新增用户失败', VxeNotifyType.error);
        });
    } else {
      // 修改用户
      const url = '/api/user/editUserInfo';
      const user = {
        id: userForm.id,
        username: userForm.username,
        realname: userForm.realname,
        orgId: userForm.orgId,
        deptId: userForm.deptId,
        tel: userForm.tel,
        email: userForm.email,
        inputCode: userForm.inputCode,
        roleIds: userForm.roleIds,
        enable: userForm.enable,
        hisEmployeeId: userForm.hisEmployeeId,
        hisEmployeeCode: userForm.hisEmployeeCode
      };
      proxy.$http
        .post(url, user)
        .then((res: any) => {
          VxeMessage('修改用户成功', VxeNotifyType.success);
          setTimeout(() => {
            clearForm();
            showDialog.value = false;
            findUserList();
          }, 500);
          // findRoleList();
          // userRowClick($form);
          // currentUser
          // Object.assign(userList, res.data); //只刷新到修改的这一条数据，不是全部保存
        })
        .catch((err: any) => {
          VxeMessage('修改用户失败', VxeNotifyType.error);
        });
    }
  });
}
function closeDialog() {
  showDialog.value = false;
  clearForm();
}

function clearForm() {
  userForm.id = null;
  userForm.username = '';
  userForm.realname = '';
  userForm.password = '';
  userForm.tel = '';
  userForm.email = '';
  (userForm.inputCode = ''), (userForm.enable = '0');
  userForm.roleIds = [];
  userForm.hisEmployeeId = '';
  userForm.hisEmployeeCode = '';
  userForm.searchValue = '';
  userForm.orgId = '';
  userForm.orgName = '';
  userForm.deptId = '';
  userForm.deptName = '';
  const treeName = 'orgTreeRef';
  const tree: any = proxy.$refs[treeName];
  tree.setCurrentKey(null);
  deptList.length = 0;
}
//resetUserForm

// 重置
function resetUserForm(row: any) {
  if (IsEmpty(row)) {
    clearForm();
    return;
  }
  userForm.id = null;
  userForm.username = '';
  userForm.realname = '';
  userForm.password = '';
  userForm.tel = '';
  userForm.email = '';
  (userForm.inputCode = ''), (userForm.enable = '0');
  userForm.orgId = '';
  userForm.orgName = '';
  userForm.deptId = '';
  userForm.deptName = '';
  userForm.roleIds = [];
  userForm.hisEmployeeId = '';
  userForm.hisEmployeeCode = '';
  userForm.searchValue = '';
  //findRoleList(); //获取所有的角色信息

  const treeName = 'orgTreeRef';
  const tree: any = proxy.$refs[treeName];
  tree.setCurrentKey(null);
  deptList.length = 0;
}

let userFormRule: any = {
  username: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur'
    },
    {
      min: 1,
      max: 256,
      message: '长度为1到256个字符',
      trigger: 'blur'
    },
    {
      message: '用户名只能为数字或英文字母',
      validator: proxy.validateUserName
    }
  ]
  // email: [
  //   {
  //     required: true,
  //     message: '请输入邮箱',
  //     trigger: 'blur'
  //   }
  // ],
  // password: [
  //   {
  //     required: true,
  //     message: '请输入密码',
  //     trigger: 'blur'
  //   }
  // ]
};

function getEmployeeList() {
  employeeModal.value = true;
  findEmployeeList();
}
function getDifferenceSetRoles(row: any) {
  rolesPermissionDialog.value = true;
  differenceSetDialog.value = true;
  uncludeModules.length = 0;
  uncludeModuleMenuMap = {};

  // 清空选中
  checkMenuRoles.arr.length = 0;
  checkPointsRoles.arr.length = 0;

  uncludeModulePointCodeMap = {};

  let checkRoles = reactive([]);
  checkRoles.push(roleInfo.id);

  // roleInfo.name = row.realname;
  const url = '/api/sys/sysUserAuthDiffer/getDifferenceSetRoles';
  const handleObj = {
    userId: row.id,
    roleIds: checkRoles
  };
  proxy.$http
    .post(url, handleObj)
    .then((res: any) => {
      uncludeModules.push(...res.data.modules);
      uncludeModuleMenuMap = res.data.moduleMenuMap;
      uncludeModulePointCodeMap = res.data.modulePointCodeMap;
      rolesPermissionDialog.value = false;
    })
    .catch((err: any) => {
      loading.value = false;
      VxeMessage('搜索用户列表失败', VxeNotifyType.error);
      rolesPermissionDialog.value = false;
    });
}
function saveDifferenceData() {
  differenceSetDialog.value = false;
  const url = '/api/user/sysUserAuthDetail/addUserAuthDetails';
  const handleObj = {
    userId: userInfo.id,
    username: userInfo.userName,
    roleId: roleInfo.id,
    roleName: roleInfo.name,
    menus: checkMenuRoles.arr,
    points: checkPointsRoles.arr
  };
  if (handleObj.points.length !== 0 || handleObj.menus.length !== 0) {
    proxy.$http
      .put(url, handleObj)
      .then((res: any) => {
        modules.length = 0;
        findAuthDetailList();
      })
      .catch((err: any) => {
        loading.value = false;
        VxeMessage('获取角色外权限保存异常', VxeNotifyType.error);
      });
  }
}

// 点击组件表格行
function SelectRowClick(row) {
  userForm.hisEmployeeCode = row.code;
}

// 设置全选(报告单元)
function selectAllSelect() {
  checkRptGroupList.length = 0;
  checkRptGroupList.push(...rptGroupList.map((item) => item.rptGroupName));
  let userInfoItem = [];
  rptGroupList.forEach(item => {
  let obj = {
    id: '',
    userId : userInfo.id,
    rptGroupId : item.id
  }
  userInfoItem.push(obj);}
  );
 

  const url = '/api/userRptGroup/addBatchSysUserRptGroup';
  proxy.$http
    .post(url, userInfoItem)
    .then((res) => {
      if (res.status.code !== 1) {
        VxeMessage('添加报告单元失败！', VxeNotifyType.error);
      } else {
        VxeMessage('添加报告单元成功！', VxeNotifyType.success);
      }
    })
    .catch((err) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}

// 取消全选(报告单元)
function clearAllSelect() {
  // checkRptGroupList.length = 0;
  const url = '/api/userRptGroup/deleteSysUserRptGroup';
  proxy.$http
    .post(url, { userId: userInfo.id })
    .then((res: any) => {
      if (res.status.code !== 1) {
        VxeMessage('删除报告单元失败！', VxeNotifyType.error);
      } else {
        checkRptGroupList.length = 0;
        VxeMessage('删除报告单元成功！', VxeNotifyType.success);
      }
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}

// 设置全选(检验仪器)
function selectAllSelect1() {
  checkInstrSetupList.length = 0;
  checkInstrSetupList.push(...instrSetupList.map((item) => item.instrName));
  let userInfoItem = [];
  instrSetupList.forEach((item => {
    let obj = {
      id:'',
      userId:userInfo.id,
      instrSetupId:item.id
    }
    userInfoItem.push(obj)
  }))

  const url = '/api/userInstrSetup/addBatchUserInstrSetUp';
  proxy.$http
    .post(url, userInfoItem)
    .then((res) => {
      if (res.status.code !== 1) {
        VxeMessage('添加检验仪器失败！', VxeNotifyType.error);
      } else {
        VxeMessage('添加检验仪器成功！', VxeNotifyType.success);
      }
    })
    .catch((err) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}

// 取消全选(检验仪器)
function clearAllSelect1() {
  const url = '/api/userInstrSetup/deleteUserInstrSetUp';
  proxy.$http
    .post(url, { userId: userInfo.id })
    .then((res: any) => {
      if (res.status.code !== 1) {
        VxeMessage('删除仪器失败！', VxeNotifyType.error);
      } else {
        VxeMessage('删除仪器成功！', VxeNotifyType.success);
        checkInstrSetupList.length = 0;
      }
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}

function autoInputCode() {
  userForm.inputCode = funBdsJsResult('firstPinYinFun', userForm.realname);
}
</script>

<style lang="scss" scoped>
#userAuth {
  height: 100%;
  .area {
    height: 100%;

    // 附加按钮间距
    .button-blue {
      margin: 5px 0 5px 5px;
    }

    // 左边表格 中间表格
    .leftTable,
    .middleTable {
      height: calc(100% - 39px);
      :deep(.vxe-table--render-wrapper) {
        height: 100%;
        .vxe-table--main-wrapper {
          height: 100%;
          .vxe-table--body-wrapper {
            height: calc(100% - 26px) !important;
          }
        }
      }
      :deep(.vxe-table--render-default) {
        height: calc(100% - 36px) !important;
      }
    }

    // 右侧——基本信息
    .rightDetail {
      height: 100%;
      .rightContent {
        height: 100%;
        // padding: 0 10px;
        // :deep(.el-scrollbar__view) {
        //   height: 100%;
        // }
        .paneBox {
          padding: 0 10px;
        }
      }
    }
  }

  // 导入用户
  :deep(.vxe-modal--box) {
    width: 800px;
    height: 500px;
    .el-scrollbar {
      height: 90%;
      :deep(.el-scrollbar__wrap) {
        height: 100%;
        .el-scrollbar__view {
          height: 100%;
          .importUser {
            width: 100%;
            height: 100%;
            .vxe-table {
              height: 98%;
            }
          }
          .importUserButton {
            margin-top: 10px;
          }
        }
      }
    }
  }
}

.paneBox {
  justify-content: space-between;
  height: calc(100% - 39px);
  overflow: auto;

  :deep(.el-card__header) {
    padding: 10px;
    padding-left: 10px;
    font-size: 16px;
    font-weight: 500;
  }

  .box-card {
    margin-top: 10px;
    height: auto;
    &:nth-child(1) {
      margin-top: 0;
    }
    .detailBox {
      padding: 2px 5px;
      height: 100%;
    }
    // 权限详情大盒子
    .detailBox {
      height: 100%;
      // 菜单列表盒子
      .menuBox {
        width: 100%;
        height: 100%;

        .DialogFirstTag {
          padding: 15px;
          font-size: 14px;
        }
        .checkItem {
          border-radius: 20px;
          .el-checkbox {
            padding: 0 10px;
            text-align: center;
          }
        }
      }
      // 功能列表盒子
      .pointBox {
        width: 100%;
        height: 100%;
        .checkItem {
          .el-checkbox {
            padding: 0 10px;
            text-align: center;
          }
        }
      }
    }
  }
}
:deep(.el-card__body) {
  padding: 0;
}
:deep(.el-tabs__content) {
  padding: 0;
}
:deep(.tab-content-wrapper) {
  height: 100%; /* 设置标签页内容的高度为 300px */
}

.margin-sm {
  margin-left: 5px;
}

:deep(.el-divider__text) {
  left: 0;
  padding: 0;
}
// 二级菜单外层盒子
.twoMenuTag {
  margin-left: 15px;
  display: inline-block;
}
.tagtitle1 {
  margin-left: 10px;
  margin-bottom: 10px;
}
.tagtitle2 {
  margin-left: 10px;
  margin-bottom: 10px;
}
// 一级菜单
.tagBox {
  text-align: center;
  vertical-align: middle;
  padding-left: 22px;
  margin-bottom: 10px;
  margin-left: 10px;
  border-radius: 5px;
}
.tagboxborder {
  border: 1px solid #27b46b;
  color: #27b46b;
}

.dialogOnlyFirstMenu {
  border: 1px solid #27b46b;
  color: #27b46b;
  :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: #27b46b;
    border-color: #27b46b;
  }
  :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
    color: #27b46b;
  }
}

.pointSelectBox {
  border: 1px solid #eabe7e;
  color: #eabe7e;
  :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: #eabe7e;
    border-color: #eabe7e;
  }
  :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
    color: #eabe7e;
  }
}
.DiaTwoboxBorder {
  border: 1px solid #c8c9cc;
  color: #909399;
  :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: #909399;
    border-color: #909399;
  }
  :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
    color: #909399;
  }
}

.tagBox:hover {
  cursor: pointer;
  .tagicon {
    opacity: 1;
  }
}

.twomenutagbgc {
  background-color: #f7f7f7;
}

//tag删除按钮
.tagicon {
  opacity: 0;
}

.tagBox1:hover {
  cursor: pointer;
  .tagicon {
    opacity: 1;
  }
}

// 功能列表tag
.tagBox1 {
  vertical-align: middle;
  margin-bottom: 10px;
  // margin-right: 10px;
  padding-left: 22px;
  margin-left: 11px;
  border-radius: 5px;
}

// 空状态
.el-empty {
  :deep(.el-empty__image) {
    position: absolute;
    top: 25%;
  }
  :deep(.el-empty__description) {
    position: absolute;
    top: 53%;
  }
}

// 授权模式的中间用户 添加角标
:deep(.vxe-body--column) {
  overflow: hidden;
}
.badgeContainer {
  .badgeItem {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: $btn-red;
    overflow: hidden;
    position: absolute;
    top: -15px;
    right: -15px;
  }
}

// 报告单元只做展示的tag
.UnitBox {
  margin: 15px;
  .el-checkbox {
    margin: 0 10px 10px 0;
  }
  .allSelectedBtns {
    margin-bottom: 10px;
    .vxe-button {
      border-radius: 5px;
    }
  }
}
</style>
